<template>
  <div>

    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px"
        label-position="right">
        <el-col :span="16">
          <jnpf-form-tip-item label="图片文件" prop="picturefiles">
            <JnpfCheckbox v-model="dataForm.picturefiles" @change="changeData('picturefiles',-1)"
              size="small" :options="picturefilesOptions" :props="picturefilesProps"
              direction="horizontal" optionType="default">

            </JnpfCheckbox>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="6">
          <jnpf-form-tip-item label="文件大小" prop="picturefilessize">
            <JnpfInputNumber v-model="dataForm.picturefilessize"
              @change="changeData('picturefilessize',-1)" placeholder="数字文本" :step="1"
              controlsPosition="bothSides">

            </JnpfInputNumber>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="16">
          <jnpf-form-tip-item label="视频文件" prop="videofile">
            <JnpfCheckbox v-model="dataForm.videofile" @change="changeData('videofile',-1)"
              size="small" :options="videofileOptions" :props="videofileProps"
              direction="horizontal" optionType="default">

            </JnpfCheckbox>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="6">
          <jnpf-form-tip-item label="文件大小" prop="videofilesize">
            <JnpfInputNumber v-model="dataForm.videofilesize"
              @change="changeData('videofilesize',-1)" placeholder="数字文本" :step="1"
              controlsPosition="bothSides">

            </JnpfInputNumber>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="16">
          <jnpf-form-tip-item label="办公文件" prop="officedocuments">
            <JnpfCheckbox v-model="dataForm.officedocuments"
              @change="changeData('officedocuments',-1)" size="small"
              :options="officedocumentsOptions" :props="officedocumentsProps" direction="horizontal"
              optionType="default">

            </JnpfCheckbox>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="6">
          <jnpf-form-tip-item label="文件大小" prop="officedocumentssize">
            <JnpfInputNumber v-model="dataForm.officedocumentssize"
              @change="changeData('officedocumentssize',-1)" placeholder="数字文本" :step="1"
              controlsPosition="bothSides">

            </JnpfInputNumber>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="16">
          <jnpf-form-tip-item label="压缩文件" prop="compressedfile">
            <JnpfCheckbox v-model="dataForm.compressedfile"
              @change="changeData('compressedfile',-1)" size="small"
              :options="compressedfileOptions" :props="compressedfileProps" direction="horizontal"
              optionType="default">

            </JnpfCheckbox>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="6">
          <jnpf-form-tip-item label="文件大小" prop="compressedfilesize">
            <JnpfInputNumber v-model="dataForm.compressedfilesize"
              @change="changeData('compressedfilesize',-1)" placeholder="数字文本" :step="1"
              controlsPosition="bothSides">

            </JnpfInputNumber>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="24">
          <jnpf-form-tip-item label-width="0">
            <el-alert type="success" title="不设置文件大小默认200M">
            </el-alert>
          </jnpf-form-tip-item>
        </el-col>
      </el-form>
      <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
        ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false" />
    </el-row>
    <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 保 存</el-button>
  </div>
</template>
<script>
import request from '@/utils/request'
import { mapGetters } from "vuex";
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { getDefaultCurrentValueUserId } from '@/api/permission/user'
import { getDefaultCurrentValueDepartmentId } from '@/api/permission/organize'
import { getDateDay, getLaterData, getBeforeData, getBeforeTime, getLaterTime } from '@/components/Generator/utils/index.js'
import { thousandsFormat } from "@/components/Generator/utils/index"

export default {
  components: {},
  props: ['pageId'],
  data() {
    return {
      dataFormSubmitType: 0,
      continueBtnLoading: false,
      index: 0,
      prevDis: false,
      nextDis: false,
      allList: [],
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {
      },
      //可选范围默认值
      ableAll: {
      },
      tableRows: {
      },
      currVmodel: "",
      dataForm: {
        picturefiles: [],
        picturefilessize: 0,
        videofile: [],
        videofilesize: 0,
        officedocuments: [],
        officedocumentssize: 0,
        compressedfile: [],
        compressedfilesize: 0,
      },
      rules:
      {



      },
      picturefilesOptions: [],
      picturefilesProps: { "label": "fullName", "value": "enCode" },
      videofileOptions: [],
      videofileProps: { "label": "fullName", "value": "enCode" },
      officedocumentsOptions: [],
      officedocumentsProps: { "label": "fullName", "value": "enCode" },
      compressedfileOptions: [],
      compressedfileProps: { "label": "fullName", "value": "enCode" },

      childIndex: -1,
      isEdit: false,
      interfaceRes: {
        picturefiles: [],
        picturefilessize: [],
        videofile: [],
        videofilesize: [],
        officedocuments: [],
        officedocumentssize: [],
        compressedfile: [],
        compressedfilesize: [],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {},
  created() {
    console.log('mzfileconfigurationCreated');
    this.init(this.pageId)
  },
  mounted() { },
  methods: {
    prev() {
      this.index--
      if (this.index === 0) {
        this.prevDis = true
      }
      this.nextDis = false
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id)
        }
      }
    },
    next() {
      this.index++
      if (this.index === this.allList.length - 1) {
        this.nextDis = true
      }
      this.prevDis = false
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id)
        }
      }
    },
    getInfo(id) {
      request({
        url: '/api/example/MzFileconfiguration/' + id,
        method: 'get'
      }).then(res => {
        this.dataInfo(res.data)
      });
    },
    goBack() {
      this.visible = false
      this.$emit('refreshDataList', true)
    },
    changeData(model, index) {
      this.isEdit = false
      this.childIndex = index
      let modelAll = model.split("-");
      let faceMode = "";
      for (let i = 0; i < modelAll.length; i++) {
        faceMode += modelAll[i];
      }
      for (let key in this.interfaceRes) {
        if (key != faceMode) {
          let faceReList = this.interfaceRes[key]
          for (let i = 0; i < faceReList.length; i++) {
            if (faceReList[i].relationField == model) {
              let options = 'get' + key + 'Options';
              if (this[options]) {
                this[options]()
              }
              this.changeData(key, index)
            }
          }
        }
      }
    },
    changeDataFormData(type, data, model, index, defaultValue) {
      if (!this.isEdit) {
        if (type == 2) {
          for (let i = 0; i < this.dataForm[data].length; i++) {
            if (index == -1) {
              this.dataForm[data][i][model] = defaultValue
            } else if (index == i) {
              this.dataForm[data][i][model] = defaultValue
            }
          }
        } else {
          this.dataForm[data] = defaultValue
        }
      }
    },
    dataAll() {
      this.getpicturefilesOptions();
      this.getvideofileOptions();
      this.getofficedocumentsOptions();
      this.getcompressedfileOptions();
    },
    getpicturefilesOptions() {
      getDictionaryDataSelector('502822474723885061').then(res => {
        this.picturefilesOptions = res.data.list
      })
    },
    getvideofileOptions() {
      getDictionaryDataSelector('502823022948777989').then(res => {
        this.videofileOptions = res.data.list
      })
    },
    getofficedocumentsOptions() {
      getDictionaryDataSelector('502823186329501701').then(res => {
        this.officedocumentsOptions = res.data.list
      })
    },
    getcompressedfileOptions() {
      getDictionaryDataSelector('502830609077370885').then(res => {
        this.compressedfileOptions = res.data.list
      })
    },
    clearData() {
      this.dataForm.picturefiles = [];
      this.dataForm.picturefilessize = 0;
      this.dataForm.videofile = [];
      this.dataForm.videofilesize = 0;
      this.dataForm.officedocuments = [];
      this.dataForm.officedocumentssize = 0;
      this.dataForm.compressedfile = [];
      this.dataForm.compressedfilesize = 0;
    },
    init(id, isDetail, allList) {
      this.prevDis = false
      this.nextDis = false
      console.log('mzfileconfiguration', id);
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/MzFileconfiguration/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
          this.initDefaultData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    //初始化默认数据
    initDefaultData() {

    },
    // 表单提交
    dataFormSubmit(type) {
      this.dataFormSubmitType = type ? type : 0
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      if (this.dataFormSubmitType == 2) {
        this.continueBtnLoading = true
      } else {
        this.btnLoading = true
      }
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/example/MzFileconfiguration',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              if (this.dataFormSubmitType == 2) {
                this.$nextTick(() => {
                  this.$refs['elForm'].resetFields();
                  this.clearData()
                  this.initDefaultData()
                })
                this.continueBtnLoading = false
                return
              }
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
          this.continueBtnLoading = false
        })
      } else {
        request({
          url: '/api/example/MzFileconfiguration/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              if (this.dataFormSubmitType == 2) return this.continueBtnLoading = false
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
          this.continueBtnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] }
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
      let timeDataValue = null;
      let timeValue = Number(timeValueData)
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = new Date().getTime()
        } else if (timeType == 4) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getBeforeData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getBeforeTime(timeTarget, timeValue).getTime()
          }
        } else if (timeType == 5) {
          let previousDate = '';
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else if (timeTarget == 3) {
            previousDate = getLaterData(timeValue)
            timeDataValue = new Date(previousDate).getTime()
          } else {
            timeDataValue = getLaterTime(timeTarget, timeValue).getTime()
          }
        }
      }
      return timeDataValue;
    },
    time(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
      let format = formatType == 'HH:mm' ? 'HH:mm:00' : formatType
      let timeDataValue = null
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue || '00:00:00'
          if (timeDataValue.split(':').length == 3) {
            timeDataValue = timeDataValue
          } else {
            timeDataValue = timeDataValue + ':00'
          }
        } else if (timeType == 2) {
          timeDataValue = dataValue
        } else if (timeType == 3) {
          timeDataValue = this.jnpf.toDate(new Date(), format)
        } else if (timeType == 4) {
          let previousDate = '';
          previousDate = getBeforeTime(timeTarget, timeValue)
          timeDataValue = this.jnpf.toDate(previousDate, format)
        } else if (timeType == 5) {
          let previousDate = '';
          previousDate = getLaterTime(timeTarget, timeValue)
          timeDataValue = this.jnpf.toDate(previousDate, format)
        }
      }
      return timeDataValue;
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.picturefiles = Array.isArray(_data.picturefiles) ? JSON.stringify(_data.picturefiles) : '[]'
      _data.videofile = Array.isArray(_data.videofile) ? JSON.stringify(_data.videofile) : '[]'
      _data.officedocuments = Array.isArray(_data.officedocuments) ? JSON.stringify(_data.officedocuments) : '[]'
      _data.compressedfile = Array.isArray(_data.compressedfile) ? JSON.stringify(_data.compressedfile) : '[]'
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.picturefiles = _dataAll.picturefiles ? JSON.parse(_dataAll.picturefiles) : []
      _dataAll.videofile = _dataAll.videofile ? JSON.parse(_dataAll.videofile) : []
      _dataAll.officedocuments = _dataAll.officedocuments ? JSON.parse(_dataAll.officedocuments) : []
      _dataAll.compressedfile = _dataAll.compressedfile ? JSON.parse(_dataAll.compressedfile) : []
      this.dataForm = _dataAll
      this.isEdit = true
      this.dataAll()
      this.childIndex = -1
    },
  },
}

</script>
